import React, { useState } from 'react'
import { Form, Input, Button, Select, Modal, Space, Radio } from 'antd';
import './css/DataScreening.scss'

export default function DataScreening() {
    const [form1] = Form.useForm();
    const [form2] = Form.useForm();
    const [isModalVisible, setIsModalVisible] = useState(false)
    const { Option } = Select;
    const onReset = () => {
        form2.resetFields();
      };
    const search = () => {
        setIsModalVisible(true)
    }
    const handleCancel = () => {
        setIsModalVisible(false);
      };
    return (
        <div>
            <div className='datascreening'>
                <span className='title'>数据筛选</span>
                <span className='search' onClick={search}>高级搜索</span>
                <Modal title="高级检索" visible={isModalVisible} footer={null} onCancel={handleCancel} width={600}>
                        <Form form={form1} name="control-hooks" layout="vertical">
                            <div className='search-box'>
                            <div className='search'>
                            <div className='form-left'>
                                <Form.Item name="company_name" label="输入查询" style={{width: 200}}>
                                    <Input placeholder='公司名称/联系人'/>
                                </Form.Item>
                                <Form.Item name="area" label="所在地区" style={{width: 200}}>
                                    <Input />
                                </Form.Item>
                            </div>
                            <div className='form-right'>
                                <Form.Item name="rank" label="合作渠道级别" style={{width: 200}}>
                                    <Input placeholder='用户姓名'/>
                                </Form.Item>
                                <Form.Item name="channel_creation_time" label="创建时间" style={{width: 200}}>
                                    <Input />
                                </Form.Item>
                            </div>
                            </div>
                            <Form.Item name="status" label="渠道状态" className='status'>
                                    <Radio.Group>
                                    <Radio value="1">已开通</Radio>
                                    <Radio value="2">未开通</Radio>
                                    <Radio value="3">禁用</Radio>
                                    <Radio value="4">删除</Radio>
                                    </Radio.Group>
                                </Form.Item>
                            <div className='btn'>
                            <Form.Item>
                                <Space>
                                    <Button type="primary" htmlType="submit" onClick={search}>开始检索</Button>
                                    <Button htmlType="button" onClick={onReset}>重置</Button>
                                </Space>
                            </Form.Item>
                            </div>
                            </div>
                            </Form>
                    </Modal>
            </div>
            <div>
                <Form layout="inline" form={form2} name="control-hooks" className='form'>
                    <Form.Item name="note" label="输入查询">
                        <Input placeholder='公司名称/联系人'/>
                    </Form.Item>
                    <Form.Item name="place" label="所在地区">
                        <Input />
                    </Form.Item>
                    <Form.Item name="rank" label="合作渠道级别">
                        <Select placeholder="全部" allowClear>
                            <Option value="1">关键合作渠道</Option>
                            <Option value="2">主要合作渠道</Option>
                            <Option value="3">普通合作渠道</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">查询</Button>
                        <Button htmlType="button" onClick={onReset}>重置</Button>
                    </Form.Item>
                    </Form>
            </div>
        </div>
    )
}
